<template>
    <div class="warp-2" style="height: 100%;">
        <navbar :title="$t('Leave_application')"></navbar>
        <div class="content">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                <van-list
                v-model="isLoading"
                :finished="finished"
                :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                loding-text="loading"
                @load="getList"
                >
                    <div class="list-box" v-if="list.length > 0">
                        <div class="info-warp" v-for="(item,index) in list" :key="index">
                            <h2 class="total">{{alType(item.alType)}}</h2>
                            <div class="base-info">
                                <label>
                                    <div>{{ $t('leave_type')}}：</div>
                                    <div>
                                        {{alType(item.alType)}}
                                    </div>
                                </label>
                                <label>
                                    <div>{{ $t('reason_taking_leave')}}：</div>
                                    <div>{{item.alReason}}</div>
                                </label>
                                <label>
                                    <div>{{ $t('Leave_start_time')}}：</div>
                                    <div>{{item.alStartTime}}</div>
                                </label>
                                <label>
                                    <div>{{ $t('Leav_end_time')}}：</div>
                                    <div>{{item.alEndTime}}</div>
                                </label>
                                <label>
                                    <div>{{ $t('mod_submit_time')}}：</div>
                                    <div>{{item.alSubTime}}</div>
                                </label>
                                <label>
                                    <div>{{ $t('approval_status')}}：</div>
                                    <div>
                                        <span
                                        :class="item.alStatus === 0 ? 'color_blue' : item.alStatus === 1 ? 'green' : 'color_red'"
                                        >{{item.alStatus === 0 ? ($t('cos_app_pending') + '...') : item.alStatus === 1 ? $t('approve_pass') : $t('approve_status_1')}}</span>
                                    </div>
                                </label>
                                <div class="center" v-if="item.alStatus === 0">
                                    <van-button round size="small" color="#f59a23" style="padding: 0 18px;" @click="deleteApply(item.alId)">{{ $t('withdrawal_application')}}</van-button>
                                </div>
                                <label v-if="item.alStatus === 2">
                                    <div>{{ $t('refuse_reason')}}：</div>
                                    <div>{{ item.alaReason }}</div>
                                </label>
                            </div>
                        </div>
                    </div>
                    <!--暂无数据-->
                    <div v-if="!isLoading && total === 0" style="height:100%;">
                        <div class="box-table" style="width:100%;height:100%;">
                            <div class="box-table-cell" style="text-align: center;">
                                <div class="no-data">
                                    <img src="../../../static/images/no-data.png" alt=""/>
                                    <p class="color999">{{ $t('no_data') }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
        <div class="bottom-btns">
            <router-link tag="div"  class="btn" :to="`/certifiedCourse/leaveApply/${itmId}/${tkhId}`">{{$t('fill_out_leave_application') }}</router-link>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
    </div>
</template>

<script>
import CommonLoading from '@/components/common/loading';
import {Toast} from 'vant';
export default {
    components: {
        CommonLoading,
        vanToast: Toast
    },
    data() {
        return {
            isLoading: true,
            itmId: this.$route.params.itmId,
            tkhId: this.$route.params.tkhId,
            list: [],
            maxPageNo: 1,
            total: 0,
            pageData: {
                pageNo: 1,
                pageSize: 30
            },
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        /**
         * 获取请假列表 */
        getList(option) {
            this.isLoading = true;
            this.$axios({
                method: 'POST',
                url: `/app/api/trainee/leave/list/${this.itmId}`,
                params: {
                    pageNo: this.pageData.pageNo,
                    pageSize: this.pageData.pageSize
                }
            }).then((res) => {
                if (res.data.results) {
                    if (option && option === 'refresh') {
                        this.list = res.data.results;
                    } else {
                        this.list = this.list.concat(res.data.results);
                    }
                }
                this.maxPageNo = res.data.totalPage;
                this.isLoading = false;
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageData.pageNo++;
                if (this.list.length >= this.total) {
                    this.finished = true;
                }
            }).catch(() => {
                this.isLoading = false;
            });
        },
        /**
         * 撤回申请 */
        deleteApply(id) {
            this.$axios({
                method: 'DELETE',
                url: `/app/api/trainee/leave/delete/${id}`
            }).then((res) => {
                Toast(this.$t('application_has_withdrawn'));
                this.pageData.pageNo = 1;
                this.getList('refresh');
            });
        },
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageData.pageNo = 1;
                this.getList('refresh');
                this.isRefresh = false;
            }, 900);
        },
        /**
            * 请假类型 */
        alType(val) {
            switch (val) {
            case 0:
                return this.$t('leave_absence');
            case 1:
                return this.$t('sick_leave');
            case 2:
                return this.$t('public_leave');
            default:
                return '--';
            }
        }
    },
    filters: {
    },
    mounted() {
        this.getList('refresh');
    }
};
</script>

<style scoped lang="less">
.center{
    text-align: center;
    margin-top: 20px;
}
.green{
    color: #70b603
}
.color_blue{
color: #00aeef
}
.color_red{
    color: #d9001b
}
/deep/.vue-scroll{
    >div:first-child{
        height: 100%;
    }
}
    .list-box{
        padding: 0 15px;
    }
    .info-warp{
        background: #fff;
        border-radius: 5px;
        margin: 15px 0;
        .total{
            text-align: center;
            border-bottom: 1px solid #eee;
            padding: 10px 0;
        }
    }
    .color_orange{
        color:#f59a23
    }
    .base-info{
        padding: 15px;
        border-bottom: 1px solid #eee;
        > label{
            display: flex;
            align-items: baseline;
            word-break: break-all;
            margin-bottom: 15px;
            >div:first-child{
                flex-shrink: 0;
                color: #7f7f7f;
            }
            &:last-child{
                margin-bottom: 0;
            }
        }
    }
    .bottom-btns{
        position: fixed;
        bottom: 0;
        left: 0;
        height: 56px;
        width: 100%;
        background: #fff;
        border-top: 1px solid #eee;
        padding: 0 40px;
        box-sizing: border-box;
        text-align: center;
        display: flex;
        align-items: center;
        .btn{
            display: inline-block;
            flex: 1;
            text-align: center;
            color:#fff;
            background: #075ebb;
            border-radius: 4px;
            height: 40px;
            line-height: 40px;
        }
    }
</style>
